<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="js/number.js"></script>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");
				canvas.width = 550;
				canvas.height = 400;
				var r = 5;
				var colors = ["#11aa23", "#870012", "#43aa63", "#999999", "#909011", "#ff0000", "#ffff00",
					"#bb33dd", "#5609ff", "#bFb0ff"
				];
				var balls = [];
				var k = 0;
				window.setInterval(function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
					var today = new Date();
					var h = today.getHours();
					var m = today.getMinutes();
					var s = today.getSeconds();
					var s1 = Math.floor(s % 10);
					
					function updateballs() {
						for (var i = 0; i < balls.length; i++) {
							balls[i].x += balls[i].vx;
							balls[i].y += balls[i].vy;
							balls[i].vy += balls[i].g;
						}

					}

                    function draw(){
						for (var i = 0; i < balls.length; i++) {
						
							cxt.fillStyle = balls[i].color;
							cxt.beginPath();
							cxt.arc(balls[i].x, balls[i].y, r, 0, 2 * Math.PI);
							cxt.fill();
							cxt.closePath();
						
						}
					}


					switch (s1) {
						case 0:					
							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_zero[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_zero[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],

											}
											balls.push(aBall);
										}
									}
								}
								
								}

								draw()
							


							break;
						case 1:

							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_one[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_one[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],
							
											}
											balls.push(aBall);
										}
									}
								}
								
								}
							
							draw();
														
							
							break;
						case 2:

							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_two[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_two[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],
							
											}
											balls.push(aBall);
										}
									}
								}
								
								}
							
							draw()
														
							break;
						case 3:

							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_three[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_three[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],
							
											}
											balls.push(aBall);
										}
									}
								}
								
								}
							
							draw()
														
							break;
						case 4:

							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_four[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_four[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],
							
											}
											balls.push(aBall);
										}
									}
								}
								
								}
							
							draw()
														
							break;
						case 5:

							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_five[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_five[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],
							
											}
											balls.push(aBall);
										}
									}
								}
								
								}
							draw()
														
							break;
						case 6:

							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_six[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_six[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],
							
											}
											balls.push(aBall);
										}
									}
								}
								
							}
							draw()					
							break;
						case 7:

							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_seven[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_seven[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],
							
											}
											balls.push(aBall);
										}
									}
								}
								}
							draw()					
							break;
						case 8:

							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_eight[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_eight[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],
							
											}
											balls.push(aBall);
										}
									}
								}
								}
							draw()
							break;
						case 9:

							for (i = 0; i < 10; i++) {
								for (j = 0; j < 7; j++) {
									if (number_nine[i][j] == 1) {
										cxt.beginPath();
										cxt.fillStyle = "blue";
										cxt.arc(70 + 50 + 2 * r * j, 50 + 2 * r * i, r, 0, 2 * Math.PI)
										cxt.fill();
										cxt.closePath();
									}
								}
							}
							
							if (k % 20 == 0) {
								for (i = 0; i < 10; i++) {
									for (j = 0; j < 7; j++) {
										if (number_nine[i][j] == 1) {
											var aBall = {
												x: 70 + 50 + 2 * r * j,
												y: 50 + 2 * r * i,
												g: 1.5 + Math.random(),
												vx: -4 + Math.random() * 8,
												vy: -5,
												color: colors[Math.floor(Math.random() * colors.length)],
							
											}
											balls.push(aBall);
										}
									}
								}
								
							}
							draw()
							break;
					}


					updateballs();
					k++;

					/*      
					drawball();
					update(); */

					console.log(s1);
					console.log(k);

				}, 50)

				/*  function drawball(){
				  //	cxt.clearRect(0,0,canvas.width,canvas.height);
				  	cxt.fillStyle=ball.color;
				  	cxt.beginPath();
				  	cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
				  	cxt.fill();
				  	cxt.closePath();
				  }
				  function update(){
				  	ball.x+=ball.vx;
				  	ball.y+=ball.vy;
				  	ball.vy+=ball.g;
				  	if(ball.y>400-2*ball.r){
				  		ball.vy=-ball.vy*0.6;
				  	}
				  } */

			}
		</script>
	</body>
</html>
